<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 1. 在标签中添加事件处理 -->
		<button id="btn1" onclick="foo1()">按钮1</button>
		
		<button id="btn2" >按钮2</button>
		
		<button id="btn3" >按钮3</button>
		
		<div id="div01" onclick="alert('div01被点击了')">div01</div>
		
		<script type="text/javascript">
			function foo1()
			{
				alert("按钮1被点击了");
			}
			
			function foo2()
			{
				alert("按钮2被点击了");
			}
			
			function foo2b()
			{
				alert("按钮2被点击了b");
			}
			
			
			function foo3()
			{
				alert("按钮3被点击了");
			}
			
			function foo3b()
			{
				alert("按钮3被点击了b");
			}
			
			// 2. 在脚本中给元素添加事件
			// 根据id找到按钮2
			// var btn2 = document.getElementById("btn2"); // 在新版本浏览器中可以省略
			btn2.onclick = foo2;
			btn2.onclick = foo2b; // 赋了2次值，后面的会覆盖掉前面那个
			
			// 3. 注册事件监听
			btn3.addEventListener("click",foo3);
			btn3.addEventListener("click",foo3b);// 这两个监听处理都会执行
		</script>
		
	</body>
</html>